<template>
  <div>   
          <el-card style="margin:-25px;background:#F5F5F5">
          <el-form >
            <el-row :gutter="20"> 
                <el-col :span="8">
                    <el-form-item label="人员分类" prop="personType">
                        <el-select  v-model="personType" filterable placeholder="人员分类"  clearable :style="{ width: '60%' }" >
                            <el-option
                            v-for="item in personTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>  
                        <el-button @click="getSearchDataList()">查询</el-button>
                    </el-form-item>          
                </el-col>                 
            </el-row>    
            <el-row :gutter="20"> 
              <el-col :span="6">
              <div id="J_chartScatterkt" :style="{height: '150px'}"></div>
              </el-col>
              <el-col :span="6">
              <div id="J_chartScatterkt1" :style="{height: '150px'}"></div>
              </el-col>
              <el-col :span="6">
              <div id="J_chartScatterkt2" :style="{height: '150px'}"></div>
              </el-col>
              <el-col :span="6">
              <div id="J_chartScatterkt3" :style="{height: '150px'}"></div>
              </el-col>    
            </el-row> <br>
            <el-row :gutter="20"> 
              <el-col :span="16">
              <div id="J_chartScatterkt4" :style="{height: '400px'}"></div>
              </el-col> 
              <el-col :span="8">
              <div id="J_chartScatterkt5" :style="{height: '400px'}"></div>
              </el-col>  
            </el-row>
            <br>
            <el-row :gutter="20"> 
              <el-col :span="24">
              <div id="J_chartScatterkt8" :style="{height: '450px'}"></div>
              </el-col> 
            </el-row> <br>   
            <el-row :gutter="20">  
              <el-col :span="16">
              <div id="J_chartScatterkt6" :style="{height: '400px'}"></div>
              </el-col> 
              <el-col :span="8">
                  <el-row :gutter="20">
                      <el-col :span="24">
                          <div id="J_chartScatterkt7" :style="{height: '200px'}"></div>
                      </el-col>      
                  </el-row> 
                  <br>
                   <el-row :gutter="20">
                      <el-col :span="24">
                          <div id="J_chartScatterkt9" :style="{height: '200px'}"></div>
                      </el-col>      
                  </el-row>      
              
              
              </el-col>     
            </el-row>    
           
             
          </el-form>  
          </el-card> 
  </div>
</template>


<script>
  import * as echarts from 'echarts'
  import 'echarts/map/js/province/beijing'
  export default {
    data () {
      return {
        dataBar: null,
        dataBar1:null,
        dataBar2:null,
        dataBar3:null,
        dataBar4:null,
        dataBar5:null,
        dataBar6:null,
        dataBar7:null,
        dataBar8:null,
        dataBar9:null,
        dataPie: [],
        dataxAxis: null,
        dataxAxis1:null,
        dataxAxis2:null,
        dataxAxis3:null,
        dataxAxis4:null,
        dataxAxis5:null,
        dataxAxis6:null,
        dataxAxis7:null,
        dataxAxis8:null,
        dataxAxis9:null,
        titleBar:null,
        titleBar1:null,
        titleBar2:null,
        titleBar3:null,
        titleBar4:null,
        titleBar5:null,
        titleBar6:null,
        titleBar7:null,
        titleBar8:null,
        titleBar9:null,
        titlePie:null,
        chartLine: null,
        chartBar: null,
        chartPie: null,
        chartScatter: null,
        initChartPites: null,
        personTypeList: [],
        personType:''
        
      }
    },
     mounted () {
         this.dataRetiredPieSeries("AREA","");
     },
    created () {
      this.dataRetiredBarSeries("SEX_GROUP","");
      this.dataRetiredBarSeries("TXQSF","");
      this.dataRetiredBarSeries("BRZT","");
      this.dataRetiredBarSeries("YJSJD","");
      this.dataRetiredBarSeries("YBD","");
      this.dataRetiredPieSeries("NATION","");
      this.dataRetiredBarSeries("TXSZW","");
      this.dataRetiredPieSeries("ZZMM","");
      this.dataRetiredPieSeries("EMPLOYEE","");
      this.dataSex('RYFL')
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartBar) {
        this.chartBar.resize()
      } 
      if (this.chartPie) {
        this.chartPie.resize()
      }
    },
    methods: {
      // 饼图
      initChartBar (data) {
      
       var option = {
            backgroundColor:"#0B1837",
            color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
            title: {
                text: this.titleBar,
                left: '60',
                top: 0,
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 0
                }
            },
            // grid: {
            //     left: -100,
            //     top: 50,
            //     bottom: 10,
            //     right: 10,
            //     containLabel: true
            // },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                type: "scroll",
                orient: "vartical",
                // x: "right",
                top: "center",
                right: "15",
                // bottom: "0%",
                itemWidth: 16,
                itemHeight: 8,
                itemGap: 16,
                textStyle: {
                    color: '#A3E2F4',
                    fontSize: 12,
                    fontWeight: 0
                },
                data: this.dataxAxis
            },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#0B4A6B",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    color: "#0B4A6B",
                    margin: 8,
                    fontSize: 16
                },
            },
            radiusAxis: {
                min: 40,
                max: 120,
                interval: 20,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#0B3E5E",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    formatter: '{value} %',
                    show: false,
                    padding: [0, 0, 20, 0],
                    color: "#0B3E5E",
                    fontSize: 16
                },
                splitLine: {
                    lineStyle: {
                        color: "#0B3E5E",
                        width: 2,
                        type: "solid"
                    }
                }
            },
            calculable: true,
            series: [{
                type: 'pie',
                radius: ["5%", "10%"],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#0B4A6B"
                        }
                    }
                }]
            }, {
                type: 'pie',
                radius: ["90%", "95%"],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                name: "",
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#0B4A6B"
                        }
                    }
                }]
            },{
                stack: 'a',
                type: 'pie',
                radius: ['20%', '80%'],
                roseType: 'area',
                zlevel:10,
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 12,
                        },
                        position: 'outside'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: (function(){
                    var res = [];
                    var len = data.list.length;
                        for(var i=0,size=len;i<size;i++) {
                         res.push({
                             //通过把result进行遍历循环来获取数据并放入Echarts中
                             name: data.list[i].name,
                             value: data.list[i].value
                         });
                        }
                        return res;
                })()
            }, ]
        }
        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      },
      //性别柱图
      initChartPitesf () {

        var option = {
            backgroundColor:"#ffff",
            color: ['#66CC00'],
                title: {
                    text: this.titleBar,
                    left: '60',
                    top: 0,
                    textAlign: 'center',
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 0
                    }
                },
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                type: 'none'
                },
                formatter:function(params){
                return params[0].name+":"+params[0].data;
                }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    left: '20%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: this.dataxAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.dataBar,
                    type: 'bar',
                    barWidth: 20
                    }
                ]
                };  
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      //退休前身份面积图
      initChartArea () {
          var option = {
            backgroundColor:"#ffff",
            color: ['#c23531'],
                title: {
                    text: this.titleBar1,
                    left: '60',
                    top: 0,
                    textAlign: 'center',
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 0
                    }
                },
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                type: 'none'
                },
                formatter:function(params){
                return params[0].name+":"+params[0].data;
                }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    left: '20%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: this.dataxAxis1
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.dataBar1,
                    type: 'bar',
                    showBackground: true,
                    barWidth: 20
                    }
                ]
                };

        // var option = {
        //     color: ['#99CCFF'],
        //     backgroundColor:"#ffff",
        //         title: {
        //             text: this.titleBar1,
        //             left: '60',
        //             top: 0,
        //             textAlign: 'center',
        //             textStyle: {
        //                 color: '#000000',
        //                 fontSize: 14,
        //                 fontWeight: 0
        //             }
        //         },
        //         tooltip : {
        //         trigger: 'axis',
        //         axisPointer: {
        //         type: 'none'
        //         },
        //         formatter:function(params){
        //         return params[0].name+":"+params[0].data;
        //         }
        //         },
        //         grid: {
        //             top: '20%',
        //             right: '8%',
        //             left: '20%',
        //             bottom: '15%'
        //         },
        //         xAxis: {
        //             type: 'category',
        //             boundaryGap: false,
        //             data:this.dataxAxis1
        //         },
        //         yAxis: {
        //             type: 'value'
        //         },
        //         series: [
        //             {
        //             data: this.dataBar1,
        //             type: 'line',
        //             areaStyle: {
        //                 color: {
        //                     type: 'linear',
        //                     x: 0,
        //                     y: 0,
        //                     x2: 0,
        //                     y2: 1,
        //                     colorStops: [{
        //                         offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
        //                     }, {
        //                         offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
        //                     }],
        //                     global: false // 缺省为 false
        //                 }
        //             },

        //             }
        //         ]
        // };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt1'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      //本身状态柱图
      initChartbar2 () {

        var option = {
            backgroundColor:"#ffff",
            color: ['#c23531'],
                title: {
                    text: this.titleBar2,
                    left: '60',
                    top: 0,
                    textAlign: 'center',
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 0
                    }
                },
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                type: 'none'
                },
                formatter:function(params){
                return params[0].name+":"+params[0].data;
                }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    left: '20%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: this.dataxAxis2
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.dataBar2,
                    type: 'bar',
                    showBackground: true,
                    barWidth: 20
                    }
                ]
                };  
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt2'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      //移交时间段面积图
      initChartbar3 () {

          var option = {
            backgroundColor:"#ffff",
            color: ['#66CC00'],
                title: {
                    text: this.titleBar3,
                    left: '60',
                    top: 0,
                    textAlign: 'center',
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 0
                    }
                },
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                type: 'none'
                },
                formatter:function(params){
                return params[0].name+":"+params[0].data;
                }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    left: '20%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: this.dataxAxis3
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.dataBar3,
                    type: 'bar',
                    barWidth: 20
                    }
                ]
                };  
                
        // var option = {
        //     color: ['#9933ff'],
        //     backgroundColor:"#ffff",
        //         title: {
        //             text: this.titleBar3,
        //             left: '60',
        //             top: 0,
        //             textAlign: 'center',
        //             textStyle: {
        //                 color: '#000000',
        //                 fontSize: 14,
        //                 fontWeight: 0
        //             }
        //         },
        //         tooltip : {
        //         trigger: 'axis',
        //         axisPointer: {
        //         type: 'none'
        //         },
        //         formatter:function(params){
        //         return params[0].name+":"+params[0].data;
        //         }
        //         },
        //         grid: {
        //             top: '20%',
        //             right: '8%',
        //             left: '20%',
        //             bottom: '15%'
        //         },
        //         xAxis: {
        //             type: 'category',
        //             boundaryGap: false,
        //             data:this.dataxAxis3
        //         },
        //         yAxis: {
        //             type: 'value'
        //         },
        //         series: [
        //             {
        //             data: this.dataBar3,
        //             type: 'line',
        //             areaStyle: {
        //                 color: {
        //                     type: 'linear',
        //                     x: 0,
        //                     y: 0,
        //                     x2: 0,
        //                     y2: 1,
        //                     colorStops: [{
        //                         offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
        //                     }, {
        //                         offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
        //                     }],
        //                     global: false // 缺省为 false
        //                 }
        //             },

        //             }
        //         ]
        // };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt3'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      //原部队柱图
      initChartbar4 () {
        var option = {
            backgroundColor:"#ffff",
            color: ['#ffcc33'],
                title: {
                    text: this.titleBar4,
                    left: '60',
                    top: 30,
                    textAlign: 'center',
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 0
                    }
                },
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                type: 'none'
                },
                formatter:function(params){
                return params[0].name+":"+params[0].data;
                }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    left: '7%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: this.dataxAxis4,
                    axisLabel : {//坐标轴刻度标签的相关设置。
                        interval:0,
                        rotate:"45"
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.dataBar4,
                    type: 'bar',
                    barWidth: 20
                    }
                ]
        };  
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt4'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
       //民族饼图
      initChartPie (data) {
        var option = {
        color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],    
        backgroundColor:"#ffff", 
        title: {
            text: this.titleBar5,
            left: '60',
            top: 30,
            textAlign: 'center',
            textStyle: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 0
            }
        },   
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
                show: true,
            left: 0,
            top: 100,
           

        },
        series: [
            {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ["60%", "50%"], 
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: (function(){
                    var res = [];
                    var len = data.list.length;
                        for(var i=0,size=len;i<size;i++) {
                         res.push({
                             //通过把result进行遍历循环来获取数据并放入Echarts中
                             name: data.list[i].name,
                             value: data.list[i].value
                         });
                        }
                        return res;
                })()
            }
        ]
        };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt5'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      //退休时职务面积图
      initChartbar5 () {
        var option = {
            color: ['#9933ff'],
            backgroundColor:"#ffff",
                title: {
                    text: this.titleBar6,
                    left: '60',
                    top: 30,
                    textAlign: 'center',
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 0
                    }
                },
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                type: 'none'
                },
                formatter:function(params){
                return params[0].name+":"+params[0].data;
                }
                },
                grid: {
                    top: '20%',
                    right: '8%',
                    left: '7%',
                    bottom: '10%'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:this.dataxAxis6,
                    axisLabel : {//坐标轴刻度标签的相关设置。
                        interval:0,
                        rotate:"30"
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: this.dataBar6,
                    type: 'line',
                    areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
        };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt6'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
       //政治面貌饼图
      initChartPie1 (data) {
        var option = {
        color: ["#01E17E", "#3DD1F9", "#906BF9", "#EAEA26", "#FFAD05", "#FFAD05"],    
        backgroundColor:"#ffff", 
        title: {
            text: this.titleBar7,
            left: '60',
            top: 30,
            textAlign: 'center',
            textStyle: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 0
            }
        },   
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
                show: true,
            left: 0,
            top: 100,
           

        },
        series: [
            {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ["60%", "50%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: (function(){
                    var res = [];
                    var len = data.list.length;
                        for(var i=0,size=len;i<size;i++) {
                         res.push({
                             //通过把result进行遍历循环来获取数据并放入Echarts中
                             name: data.list[i].name,
                             value: data.list[i].value
                         });
                        }
                        return res;
                })()
            }
        ]
        };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt7'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
        //职工分类饼图
      initChartPie2 (data) {
        var option = {
        color: ["#906BF9", "#FE5656", "#3DD1F9", "#EAEA26", "#FFAD05", "#FFAD05"],    
        backgroundColor:"#ffff", 
        title: {
            text: this.titleBar9,
            left: '60',
            top: 30,
            textAlign: 'center',
            textStyle: {
                color: '#000000',
                fontSize: 14,
                fontWeight: 0
            }
        },   
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
                show: true,
            left: 0,
            top: 100,
           

        },
        series: [
            {
           
            type: 'pie',
            radius: ['40%', '70%'],
            center: ["60%", "50%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: (function(){
                    var res = [];
                    var len = data.list.length;
                        for(var i=0,size=len;i<size;i++) {
                         res.push({
                             //通过把result进行遍历循环来获取数据并放入Echarts中
                             name: data.list[i].name,
                             value: data.list[i].value
                         });
                        }
                        return res;
                })()
            }
        ]
        };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt9'))
        this.chartPie.setOption(option)
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
       //北京市地图
      provinceMap (dataY,databar,shuliang,contrys) {
        var yData = [];
        var barData = [];
        var dataValue = [];
        var title = '';
        if(databar == [])
        {   var len = dataY.list.length;
            for(var i=0,size=len;i<size;i++) {
            dataValue.push({
                        name: dataY.list[i].name,
                        value: dataY.list[i].value
                    });    
            barData.push({
                name: dataY.list[i].name,
                value: dataY.list[i].value
            });
            yData.push(i+","+dataY.list[i].name);
            }
            title = '地区及街道人数排名展示';
        }else
        {   
            var len = dataY.list.length;
            for(var i=0,size=len;i<size;i++) {
                    dataValue.push({
                         name: dataY.list[i].name,
                        value: dataY.list[i].value,
                        percentage:100
                    });
            }
             var lens = databar.list.length;
            for(var i=0,size=lens;i<size;i++) {
                var sum = parseInt(databar.list[i].value)/parseInt(shuliang);
                var sumVlaue = parseFloat(sum)*100
                sumVlaue = sumVlaue.toFixed(2);
                    barData.push({
                        name: databar.list[i].name,
                        value: databar.list[i].value,
                        percentage:sumVlaue
                    });
                    yData.push(i+","+databar.list[i].name);
            }
            title = contrys+'街道人数排名展示'
        }
        
        var option = {
            backgroundColor:"#ffff", 
            title: [{
                show: true,
                text: title,
                textStyle: {
                    color: '#2D3E53',
                    fontSize: 15
                },
                right: 200,
                top: 5
            }],
            toolbox: {
                itemSize:30 ,
                feature : {
                  myTool1: {  
                        show: true,  
                        title: '返回',  
                        icon: 'image://'+ window.SITE_CONFIG.cdnUrl + '/static/img/fh.png',  
                        onclick: () => {
                          this.rollBack()
                        }
                    }
                
                }
            },

            dataZoom:[ 
                {
                    start:0,//默认为0
                    end: 100,//默认为100
                    type: 'slider',
                    maxValueSpan:9,//显示数据的条数(默认显示10个)
                    show: true,
                    handleSize: 0,//滑动条的 左右2个滑动条的大小
                    height: '80%',//组件高度
                    left: '99%', //左边的距离
                    right: '0.2%',//右边的距离
                    top: 50,//上边边的距离
                    borderColor: "#C0C0C0",
                    fillerColor: '#C0C0C0',//滑动块的颜色
                    // backgroundColor: 'rgba(13,33,117,0.5)',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    realtime:true, //是否实时更新
                    filterMode: 'filter',
                    yAxisIndex: [0],//控制的y轴
                },
                    //滑块的属性
                {
                    type: 'inside',
                    show: true,
                    yAxisIndex: [0],
                    start: 1,//默认为1
                    end: 9,//默认为100
                },

            ],
            tooltip: {
                show: true,
                formatter: function(params) {
                     if(databar == []){
                        return params.name + '：' + params.data['value']
                     }else
                     {
                        return params.name + '：' + params.data['value'] +"<br> "+"比例："+params.data['percentage']+"%"
                     }
                    
                },
            },
            visualMap: {
                type: 'continuous',
                orient: 'horizontal',
                itemWidth: 10,
                itemHeight: 80,
                text: ['高', '低'],
                showLabel: true,
                seriesIndex: [0],
                min: 0,
                max: 2000,
                inRange: {
                    color: ['#6FCF6A', '#FFFD64', '#FF5000']
                },
                textStyle: {
                    color: '#7B93A7'
                },
                bottom: 30,
                left: 'left',
            },
            grid: {
                right: 10,
                top: 20,
                bottom: 10,
                width: '25%'
            },
            xAxis: {
                show: false
            },
            yAxis: {
                type: 'category',
                inverse: true,
                nameGap: 16,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    interval: 0,
                    margin: 110,
                    textStyle: {
                        color: '#455A74',
                        align: 'left',
                        fontSize: 14
                    },
                    rich: {
                        a: {
                            color: '#fff',
                            backgroundColor: '#FAAA39',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                        },
                        b: {
                            color: '#fff',
                            backgroundColor: '#4197FD',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                        }
                    },
                    formatter: function(params) {
                        var index=params.lastIndexOf("\,");
                            return [
                                '{a|' + (parseInt(params.slice(0, index)) + 1) + '}' + '   ' + params.slice(index+1)
                            ].join('\n')     
                    }
                },
                data: yData
            },
            geo: {
                // roam: true,
                map: '北京',
                left: '23%',
                right: '50%',
                // top: '1%',
                //     bottom: '1%',
                // layoutSize: '80%',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    emphasis: {
                        areaColor: '#fff464'
                    }
                }
            },
            series: [{
                name: 'mapSer',
                type: 'map',
                roam: false,
                geoIndex: 0,
                label: {
                    show: false,
                },
                data: dataValue
            }, {
                name: 'barSer',
                type: 'bar',
                roam: false,
                visualMap: false,
                zlevel: 2,
                barMaxWidth: 8,
                barGap: 0,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [{
                                    colorStops: [{
                                        offset: 0,
                                        color: '#FFD119' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#FFAC4C' // 100% 处的颜色
                                    }]
                                },
                                {
                                    colorStops: [{
                                        offset: 0,
                                        color: '#00C0FA' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#2F95FA' // 100% 处的颜色
                                    }]
                                }
                            ];
                            if (params.dataIndex < 3) {
                                return colorList[0]
                            } else {
                                return colorList[1]
                            }
                        },
                        barBorderRadius: 15
                    }
                },
                data: barData
            }]
        };
        this.chartPie = echarts.init(document.getElementById('J_chartScatterkt8'))
        this.chartPie.setOption(option)
        this.chartPie.off('click');
        this.chartPie.on('click', (param)=> {
            var personType = this.personType;
            var contrys = param.name;
            var shuliang = param.value;
            this.$http({
              url: this.$http.adornUrl("/jxxm/all/map/" + contrys),
              method: "get",
              params: this.$http.adornParams({
                'personType':personType
            }),
            }).then(({ data }) => {   
                this.provinceMap (dataY, data,shuliang,contrys)
                
                  //
                this.dataRetiredBarSeries("SEX_GROUP",contrys,personType);
                this.dataRetiredBarSeries("TXQSF",contrys,personType);
                this.dataRetiredBarSeries("BRZT",contrys,personType);
                this.dataRetiredBarSeries("YJSJD",contrys,personType);
                this.dataRetiredBarSeries("YBD",contrys,personType);
                this.dataRetiredPieSeries("NATION",contrys,personType);
                this.dataRetiredBarSeries("TXSZW",contrys,personType);
                this.dataRetiredPieSeries("ZZMM",contrys,personType);
                this.dataRetiredPieSeries("EMPLOYEE",contrys,personType);
               
                  
            });  
        });
        window.addEventListener('resize', () => {
          this.chartPie.resize()
        })
      },
      //柱状图数据获取
      dataRetiredBarSeries(type,area,personType){
          this.$http({
          url: this.$http.adornUrl("/jxxm/all/xAxis/" + type),
          method: "get",
          params: this.$http.adornParams({
            'area':area,
            'personType':personType
          })
        }).then(({ data }) => {  
            if(type == 'SEX_GROUP')
            {   this.dataxAxis = data.list;
            }else if(type == 'TXQSF')
            {   
                this.dataxAxis1 = data.list;
            }else if(type == 'BRZT')
            {   
                this.dataxAxis2 = data.list;
            }else if(type == 'YJSJD')
            {   
                this.dataxAxis3 = data.list;
            }else if(type == 'YBD')
            {   
                this.dataxAxis4 = data.list;
            }else if(type == 'TXSZW')
            {   
                this.dataxAxis6 = data.list;
            }
         
          this.$http({
            url: this.$http.adornUrl("/jxxm/all/select/" + type),
            method: "get",
            params: this.$http.adornParams({
            'area':area,
            'personType':personType
            })
          }).then(({ data }) => {
            
            if(type == 'SEX_GROUP')
            {   this.dataBar = data.list;
                this.titleBar = '性别'
                this.initChartPitesf ()
            }else if(type == 'TXQSF')
            {   
                this.dataBar1 = data.list;
                this.titleBar1 = '退休前身份'
                this.initChartArea()
            }else if(type == 'BRZT')
            {   
                this.dataBar2 = data.list;
                this.titleBar2 = '本人状态'
                this.initChartbar2()
            }else if(type == 'YJSJD')
            {   
                this.dataBar3 = data.list;
                this.titleBar3 = '移交时间段'
                this.initChartbar3()
            }else if(type == 'YBD')
            {   
                this.dataBar4 = data.list;
                this.titleBar4 = '原部队'
                this.initChartbar4()
            }else if(type == 'TXSZW')
            {   
                this.dataBar6 = data.list;
                this.titleBar6 = '退休时职务'
                this.initChartbar5()
            }
            
    
          });
          
          
        });
      },
      //饼状图数据获取
      dataRetiredPieSeries(type,area,personType){
          this.$http({
          url: this.$http.adornUrl("/jxxm/all/xAxis/" + type),
          method: "get",
          params: this.$http.adornParams({
            'area':area,
            'personType':personType
          })
        }).then(({ data }) => {
            if(type == 'NATION')
            {
                this.dataxAxis5 = data.list;
            }else if(type == 'ZZMM')
            {
                this.dataxAxis7 = data.list;
            }else if(type == 'AREA')
            {
                this.dataxAxis8 = data.list;
            }else if(type == 'EMPLOYEE')
            {
                this.dataxAxis9 = data.list;
            }
            this.$http({
              url: this.$http.adornUrl("/jxxm/all/pie/" + type),
              method: "get",
              params: this.$http.adornParams({
                'area':area,
                'personType':personType
              })
            }).then(({ data }) => {  
            if(type == 'NATION')
            {
                this.titleBar5 = "民族";
                this.initChartPie (data)
            }else if(type == 'ZZMM')
            {
                this.titleBar7 = "政治面貌";
                this.initChartPie1 (data)
            }else if(type == 'AREA')
            {   
                this.titleBar8 = "地区及街道人数排名展示";
                this.provinceMap (data,"","","")
            }else if(type == 'EMPLOYEE')
            {
                this.titleBar9 = "职工分类";
                this.initChartPie2 (data)
            }
            });  
        });
      },
      changeType(params){
        const { value, label } = params
        this.titlePie = label
        this.titleBar = label
        this.dataRetiredBarSeries(value);
        this.dataRetiredPieSeries(value);
      },
      rollBack()
      {
        var personType = this.personType;
        this.dataRetiredPieSeries("AREA","",personType);
        this.dataRetiredBarSeries("SEX_GROUP","",personType);
        this.dataRetiredBarSeries("TXQSF","",personType);
        this.dataRetiredBarSeries("BRZT","",personType);
        this.dataRetiredBarSeries("YJSJD","",personType);
        this.dataRetiredBarSeries("YBD","",personType);
        this.dataRetiredPieSeries("NATION","",personType);
        this.dataRetiredBarSeries("TXSZW","",personType);
        this.dataRetiredPieSeries("ZZMM","",personType);
        this.dataRetiredPieSeries("EMPLOYEE","",personType);
      },
      //字典
      dataSex(type){
         this.$http({
            url: this.$http.adornUrl("/sys/dict/select/"+type),
            method: "get",
            params: this.$http.adornParams(),
            })
            .then(({ data }) => {            
                this.personTypeList = data && data.code === 0 ? data.list : [];    
            })
      },
      // 获取查询数据列表
      getSearchDataList () {
        var personType = this.personType;
        this.dataRetiredPieSeries("AREA","",personType);
        this.dataRetiredBarSeries("SEX_GROUP","",personType);
        this.dataRetiredBarSeries("TXQSF","",personType);
        this.dataRetiredBarSeries("BRZT","",personType);
        this.dataRetiredBarSeries("YJSJD","",personType);
        this.dataRetiredBarSeries("YBD","",personType);
        this.dataRetiredPieSeries("NATION","",personType);
        this.dataRetiredBarSeries("TXSZW","",personType);
        this.dataRetiredPieSeries("ZZMM","",personType);
        this.dataRetiredPieSeries("EMPLOYEE","",personType);
      },
    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
  .contextMenuCss {
      left: 100px;
      top: 500px;
      cursor:pointer
  }
</style>
